window.onload=function(){
    linkto();
      // 链接购物车   
      let shopping=document.querySelector('.shopping');
      shopping.addEventListener('click',function(){
          location.href='./shoppingCart.html'
      })
    // 详情介绍
let topimgitems=document.querySelectorAll('.top-img-item');
let botimgitems=document.querySelectorAll('.bottom-img-item');
let leftBtn=document.querySelector('.left-btn');
let rightBtn=document.querySelector('.right-btn');


// 抽离公共部分 生产函数
function imgBtn(sss){
      // 先循环去掉类名
      for(let i=0;i<topimgitems.length;i++){
        topimgitems[i].className='top-img-item ';
        botimgitems[i].className='bottom-img-item fl ';
    }
    // 再对选中项添加类名
    topimgitems[sss].className='top-img-item  show';
    botimgitems[sss].className='bottom-img-item fl img-active';
}

let index=0;
// 下一张 定义一个index=0 
rightBtn.addEventListener('click',function(){
    index++;
    // index 边界判断
    if(index>topimgitems.length-1){index=0}
    imgBtn(index)
})
//上一张
leftBtn.addEventListener('click',function(){
    index--;
    // index 边界判断
    if(index<0){index=topimgitems.length-1}
    imgBtn(index)
})
// 点小图片
for(let i=0 ;i<botimgitems.length;i++){
    botimgitems[i].addEventListener('click',function(){
        imgBtn(i)
    })
}

// 种类选择
let kinds=document.querySelectorAll('.kind');
let icons=document.querySelectorAll('.kind .icon')

for(let i=0;i<kinds.length;i++){
    kinds[i].addEventListener('click',function(){
        for(let j=0;j<kinds.length;j++){
            kinds[j].className='kind fl'
            icons[j].className='icon'
        }
        kinds[i].className='kind fl kind-active'
        icons[i].className='icon show'
    })
}

// 购物车和计件
// 减
let minus=document.querySelector('.info-num-bottom');
let plus=document.querySelector('.info-num-top');
let sum=document.querySelector('.info-num #sum');

// 点击加号 数字加1 减号减一 小于1 一直为一 提示已是最低数量
plus.addEventListener('click',function(){
   let a=sum.innerText
   a=parseInt(a)+1
   sum.innerText=a
})
minus.addEventListener('click',function(){
    let a=sum.innerText
    a=parseInt(a)-1
    if(a<1){
        sum.innerText=1
        alert('无法再减少了')
    }else{
        sum.innerText=a
    }
 })

// 人气单品优化 方法3
// 拿父节点
let populerContent=document.querySelector('.populer-content');
let div=document.createElement('div');
div.className='populer-itembox';
let starstr='';
for(let i=0;i<4;i++){
    starstr+=`
    <div class="populer-item fl">
    <div class="populer-item-img">
    </div>
    <div class="populer-item-text">
        <div class="populer-item-icon">
            8折
        </div>
        <p class="populer-item-writer">白夜行  &nbsp; 东野上吾</p>
        <div class="populer-item-star">
            <div class="cred fl">推荐：</div>
            <div class="populer-item-starbox fl">
                <div class="star-null"></div>
                 <div class="star-solid"></div>
            </div>
        </div>
        <p class="new-oldprice">
            <span class="populer-item-newprice">￥:38</span> 
            <span class="populer-item-oldprice lt">￥:58</span> 
        </p>
    </div>
    </div>
    `
}
div.innerHTML=starstr
populerContent.appendChild(div);

// 看来又看优化 方法2
let allAppraisecontent=document.querySelector('.all-appraise-left-content');
let allAppraisecontentstr='';
for(let i=0;i<7;i++){
    allAppraisecontentstr+=`
    <div class="all-appraise-left-item">
    <div class="populer-item ">
        <div class="populer-item-img">
        </div>
        <div class="populer-item-text">
            <div class="populer-item-icon">
                8折
            </div>
            <p class="populer-item-writer">白夜行 &nbsp; 东野上吾</p>
            <div class="populer-item-star">
                <div class="cred fl">推荐：</div>
                <div class="populer-item-starbox fl">
                    <div class="star-null"></div>
                    <div class="star-solid"></div>
                </div>
            </div>
            <p class="new-oldprice">
                <span class="populer-item-newprice">￥:38</span>
                <span class="populer-item-oldprice lt">￥:58</span>
            </p>
        </div>
    </div>
</div>
    `
}
allAppraisecontent.innerHTML=allAppraisecontentstr;



// appraise评价 选项卡
let allAppraisetexts=document.querySelectorAll('.all-appraise-righ-toptitle-text');
let allAppraiserightcontents=document.querySelectorAll('.all-appraise-right-content');
let allAppraiseright=document.querySelector('.all-appraise-right');
let  allAppraisebottomimg=document.querySelector('.all-appraise-bottomImg');

console.log(allAppraisebottomimg);

for(let i=0;i<allAppraisetexts.length;i++){
    
    allAppraisetexts[i].addEventListener('mouseover',function(){
       if(i===0){
        allAppraisebottomimg.style.display='block';
       }else{
        allAppraisebottomimg.style.display='none'
       }
        for(let j=0;j<allAppraisetexts.length;j++){
            allAppraisetexts[j].className='all-appraise-righ-toptitle-text fl';
            allAppraiserightcontents[j].className='all-appraise-right-content';
        }
        allAppraisetexts[i].className='all-appraise-righ-toptitle-text fl all-appraise-activ';
        allAppraiserightcontents[i].className='all-appraise-right-content show';
        // 获取选项卡高度加上标题53 赋值给右边父盒子
       let height=allAppraiserightcontents[i].offsetHeight;
       height+=53;
       allAppraiseright.style.height=height+'px';
    })
}




}